<template>
  <div class="box">
    <div
      class="svgaBox"
      :style="{ width: width, height: height }"
      :id="'svgaBox' + index"
    ></div>
  </div>
</template>

<script>
import SVGA from "svgaplayerweb";
export default {
  //   props: ["url", "index",'width','height'],
  props: {
    url: {
      required: true,
    },
    index: {
      default: "",
    },
    width: {
      default: "100px",
    },
    height: {
      default: "100px",
    },
  },
  methods: {
    playSvga() {
      const player = new SVGA.Player("#svgaBox" + this.index);
      var parser = new SVGA.Parser("#svgaBox" + this.index);
      //注意，这里必须是服务器地址，否则报错
      parser.load(this.url, function (videoItem) {
        //   player.loops = 1; // 设置循环播放次数是1
        player.setVideoItem(videoItem);
        player.startAnimation();
      });
    },
  },
  watch: {
    url: {
      handler(newName, oldName) {
        //   this.fullName = newName + ' ' + this.lastName;
        this.$nextTick(() => {
          this.playSvga();
        });
      },
      // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
      immediate: true,
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  padding: 5px;
}
</style>